<template>
  <div class="musicList">
    <div class="musicListHead">
      <div class="left">
        <svg aria-hidden="true" class="bofang_icon">
          <use xlink:href="#icon-gf-playCircle"></use></svg
        ><span>播放全部</span><i>共{{ musicItemListDynamic.trackCount }}首</i>
      </div>
      <div class="right">+收藏({{ changeCount(musicItemListDynamic.subscribedCount) }})</div>
    </div>
    <div class="musicListContent">
      <ul class="main_list">
        <li
          v-for="(music, index) in itemAllSong.songs"
          :key="music.id"
          class="music_list_item"
        >
          <div class="num">{{ index + 1 }}</div>
          <div class="music_info">
            <h3>{{ music.name }}</h3>
            <h5>
                <span v-show="music.fee == '1'"  class="vip">vip</span>
                <span v-show="itemAllSong.privileges[index].maxBrLevel === 'lossless'" class="sq">SQ</span>
                <span v-show="itemAllSong.privileges[index].maxBrLevel === 'hires'" class="sq">Hi-res</span>
              <i v-for="ar in music.ar" :key="ar.id">{{ ar.name }}</i
              ><i class="alname">{{ " - " + music.al.name }}</i>
            </h5>
          </div>

          <div class="music_op">
            <div class="showMv">
              <svg aria-hidden="true" class="music_op_icon">
                <use xlink:href="#icon-shipin"></use>
              </svg>
            </div>
            <div class="showList">
              <svg aria-hidden="true" class="music_op_icon">
                <use xlink:href="#icon-31liebiao"></use>
              </svg>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // musicItemListDynamic
  props: ["itemAllSong", "musicItemListDynamic"],
  setup(props) {
    // let itemAllSong = props.itemAllSong;
    // let musicItemListDynamic = props.musicItemListDynamic;


    console.log(props.itemAllSong)


    let localData = JSON.parse(sessionStorage.getItem("itemDetail"));

    if (props.itemAllSong == undefined) {
      props.itemAllSong = localData.itemAllSong;
    }

    if (props.musicItemListDynamic.subscribedCount == undefined) {
      props.musicItemListDynamic = localData.musicItemListDynamic;
    }



        function changeCount(count) {
      if (count >= 100000000) {
        return (count / 100000000).toFixed(1) + "亿";
      } else if (count >= 10000) {
        return (count / 10000).toFixed(0) + "万";
      }
    }
    return {
      changeCount,
  
    };
    
  },
};
</script>

<style lang="less" scoped>
/* 开始歌曲列表 */

.musicList {
  margin-top: 0.2rem;
  width: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 0.5rem;
}

.musicList .musicListHead {
  width: 100%;
  height: 1rem;
  padding: 0 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.musicList .musicListHead .left,
.musicList .musicListHead .right {
  font-size: 0.3rem;
}

.musicList .musicListHead .left span {
  font-size: 0.3rem;
  font-weight: 700;
}

.musicList .musicListHead .left i {
  font-size: 0.2rem;
  font-style: normal;
  color: gray;
  font-weight: 500;
}

.musicList .musicListHead .right {
  background-color: #e71313;
  padding: 0.1rem 0.2rem;
  border-radius: 0.5rem;
  color: #fff;
}

.musicList .musicListHead .left .bofang_icon {
  width: 0.4rem;
  height: 0.4rem;
  fill: #e71313;
  vertical-align: center;
  transform: translateY(20%);
  margin-right: 0.1rem;
}

.musicListContent {
  width: 100%;
}

.musicListContent .main_list {
  width: 100%;
}

.music_list_item {
  padding: 0.4rem 0.2rem;
  height: 1.1rem;
  display: flex;
  justify-content: center;
}

.music_list_item .num {
  font-size: 0.3rem;
  color: gray;
  flex: 0.5;
  display: flex;
  align-items: center;
  padding: 0 .1rem;
}

.music_list_item .music_info {
  font-size: 0.5rem;
  color: gray;
  flex: 7.5;
  flex-direction: column;
  justify-content: space-around;
  transform: translateY(-100%);
  .vip,.sq{
    display: inline-block;
    color: #ed3131;
    font-size: 0.1rem;
    border: .01rem solid;
    padding: 0 .05rem;
    margin: 0;
    line-height: .22rem;
    height: .25rem;
    box-sizing: border-box;
    font-weight:400;
    border-radius: .05rem;
    border-color: #f12929;
    margin: .05rem;
  }
}

.music_list_item .music_info h3 {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.3rem;
  color: rgb(47, 47, 47);
font-weight: 500;
  width: 100%;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 1;
}

.music_list_item .music_info h5 {
  height: 0.3rem;
//   line-height: 0.5rem;
  font-size: 0.2rem;
  color: rgb(137, 137, 137);
  font-weight: 400;

width: 100%;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 1;
//   padding-right: .2rem;


  i {
    font-style: normal;
  }
}

.music_list_item .music_op {
  flex: 2;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  transform: translateY(-15%);
}

.music_op_icon {
  width: 0.3rem;
  height: 0.3rem;
  fill: gray;
}
</style>